<template>
    <div>
      
        <table class="table table-bordered">
            <tbody >
                <tr>
                    <td>编号</td>
                    <td>酒店名称</td>
                    <td>手机号</td>
                    <td>图片</td>
                    <td>地址</td>
                    <td>酒店类别</td>
                </tr>
                <tr v-for="item in list" :key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.Phone }}</td>                  
                    <td><img :src="item.Photo" width="100" ></td>
                    <td>{{ item.Address }}</td>
                    <td>{{ item.TeSeName }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

    import{ref,reactive} from 'vue'

    let  list = reactive([
    {
      Id: 1,
      ShopName: "北京如家酒店",
      Phone: "18888888888",
      Photo: "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
      Address: "北京昌平202",
      TeSeName: "豪华婚宴"
    },
   {
      Id: 2,
      ShopName: "北京汉庭酒店",
      Phone: "18899988888",
      Photo: "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",
      Address: "北京昌平201",
      TeSeName: "豪华婚宴"
    },
    {
      Id: 3,
      ShopName: "北京花儿顿酒店",
      Phone: "188777888866",
      Photo: "https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
      Address: "北京昌平208",
      TeSeName: "豪华婚宴"
    },
])



</script>

<style scoped>

</style>